<template>
  <div id="bill">
    <!--<div class="msg">请通过对公打款的方式支付账单应付金额，我们将在<span>3个工作日</span>内完成对出租方的汇款。</div>-->
    <div class="bill_list">

      <div class="blue-line"></div>

      <div class="bill-items">
        <div class="detail bill-item block" style="margin-top: 0px; border-radius: 0px 0px 10px 10px;">
          <!--<div class="flex space-between" style="align-items: center;"><h3>汇款账号信息</h3><div class="base_btn copy-btn">复制</div></div>
          <p class="flex space-between"><span>开户行</span><span>北京黑泉路支行</span></p>
          <p class="flex space-between"><span>开户名称</span><span>孟德的路有限公司</span></p>
          <p class="flex space-between"><span>账号</span><span>83873772883782733</span></p>

          <div class="dashed-line" style=""></div>-->

          <div class="bill-info">
            <h3 style="text-align: center;">发票详情</h3>
            <p class="flex space-between"><span>发票抬头</span><span>{{comData.enterpriseName}}</span></p>
            <p class="flex space-between"><span>税号</span><span>{{comData.taxpayerNum}}</span></p>
            <div class="dashed-line" style=""></div>
            <p class="flex space-between"><span>租赁费</span><span>{{orderInfo.leaseFee}}元</span></p>
            <p class="flex space-between"><span>服务费</span><span>{{orderInfo.serviceFee}}元</span></p>
            <p class="flex space-between"><span style="font-size: 14px; color:#333;">应付金额（共计）</span><span style="color: #FF7F5D; font-size: 16px;font-weight: bold;">{{orderInfo.leaseFee+orderInfo.serviceFee}}元</span></p>
          </div>

          <div style="clear: both;"></div>
        </div>

        <div class="detail bill-item block">
          <h3 style="text-align: center; position: relative;">收票信息<div class="edit-icon" v-show="iswrite" @click="iswrite=!iswrite"><img src="./imgs/edit_icon.png"></div></h3>
          <div class="form-lay" style="margin-top: 20px;">
            <form>
              <div class="bill-input flex space-between align-center">
                <span>收件人：</span>
                <input style="text-align: right;" :readonly="iswrite == true" v-model="tabform.name" placeholder="请输入收件人名称" />
              </div>
              <div class="bill-input flex space-between align-center">
                <span>手机号码：</span>
                <input style="text-align: right;" :readonly="iswrite" v-model="tabform.phone" placeholder="请输入收件人手机号" />
              </div>
              <div class="bill-input flex space-between align-center">
                <span>区域：</span>
                <!--<input style="direction: rtl;" v-model="selectArea" :readonly="iswrite" placeholder="请输入" />-->
                <div style="height: 35px;line-height: 35px;" @click="openArea">{{tabform.takerAddress}}<div v-show="!tabform.takerAddress"  style="text-decoration: underline; font-size: 13px; display: inline; margin-left: 10px;">选择区域</div></div>

              </div>
              <div class="bill-input flex space-between align-center" style="border: none;">
                <span>详细地址：</span>
                <input style="text-align: right;" :readonly="iswrite" v-model="tabform.address" placeholder="例：黑泉路宝盛里广场C座1层101室" />
              </div>

            </form>
          </div>

          <div style="clear: both;"></div>
        </div>

        <!--<div class="submit" v-show="!iswrite" @click="saveTaker">确认收票信息</div>-->
        <div class="submit" v-show="iswrite" @click="applyInvoice">确认申请</div>
        <div class="btn-group" v-show="!iswrite">
          <div class="base_btn reset_btn" @click="iswrite=!iswrite">取消</div>
          <div class="base_btn sure_btn" @click="saveTaker">确认收票信息</div>
        </div>

      </div>
    </div>
    <mnav cur="2"></mnav>
  </div>
</template>

<script>
//  import myarea from '../../components/area/area.vue'
  export default {
    name: 'company-bill',
//    components: {myarea},
    data () {
      return {
        iswrite: true,
        comData: {}, //企业信息
        orderId: '',
        orderInfo: {},
        selectArea:'',
        tabform: {
          name:'',
          phone:'',
          address:'',
          takerAddress: '',
        }
      }
    },
    created () {
      this.orderId = this.$route.query.id?this.$route.query.id.toString():'';
      this.getOrderInfo();
      this.queryList();
    },
    mounted() {

    },
    methods: {
      editinfo(){
        this.iswrite = !this.iswrite;
        console.log(this.iswrite)
      },
      getOrderInfo() {
        this.$http.post('yxc/order/orderInfo',{
          id: this.orderId
        }).then(res=>{
          if(res.code == 200) {
            this.orderInfo = res.data;
          }
        });
      },
      queryList() {
        this.$http.post('yxc/enterprise/queryList',{}).then(res=>{
          if(res.code == 200) {

            if(res.data.length>0) {
              this.comData = res.data[0];
              this.tabform.phone = this.comData.takerPhone;
              this.tabform.takerAddress = this.comData.takerAddress;
              this.tabform.name = this.comData.takerName;
              this.tabform.address = this.comData.houseNumber;
            }

          }
        })

      },
      //申请发票
      applyInvoice(){
        if(this.tabform.name == '' || this.tabform.name == null) {
          this.$toast('请输入收件人');
          return false;
        }
        if(this.tabform.phone == '' || this.tabform.phone == null) {
          this.$toast('请输入手机号');
          return false;
        }
        if(this.tabform.takerAddress == '' || this.tabform.takerAddress == null) {
          this.$toast('请输入地区');
          return false;
        }
        if(this.tabform.address == '' || this.tabform.address == null) {
          this.$toast('请输入详细地址');
          return false;
        }
        this.$http.post('yxc/invoice/create',
          {
            "houseNumber": this.tabform.address,
            "orderId": this.orderId,
            "takerAddress": this.tabform.takerAddress.replace(/ /g, '-'),
            "takerEmail": "",
            "takerName": this.tabform.name,
            "takerPhone": this.tabform.phone
          }).then(res=>{
            if(res.code == '200') {
              this.$toast('申请已提交')
              this.goUrl('company','bill')
            } else {
              this.$toast(res.message)
            }
        })
      },
      goUrl(path, funCode) {
        this.$router.push({
          path: '/'+path,
          query:{
            funCode: funCode,
            id: this.orderId
          }
        })
      },
      //保存企业地址
      saveTaker(){
        this.iswrite = !this.iswrite;
        this.$http.post('yxc/enterprise/saveTaker',{
          houseNumber: this.tabform.address,
          id: this.comData.id,
          takerAddress: this.tabform.takerAddress.replace(/ /g, '-'),
          takerEmail: '',
          takerName: this.tabform.name,
          takerPhone: this.tabform.phone
        }).then(res=>{

        })
      },
      //弹出区域
      openArea(){
        $("body").css("overflow-y","hidden");
        this.$bottomCard({//用工宝签约
          name: 'autoarea',
          width: '100%',
          title: '选择区域',
          funCode: "autoarea",
          props: {
            province: this.province,
            city: this.city,
            county: this.county,
          },
          callback: (close, obj) => {
            $("body").css("overflow-y","initial");
            let backVal = JSON.stringify(obj);

            if(backVal != '{}') {
              this.tabform.takerAddress = obj.province.value + '-' + obj.city.value + '-' + obj.area.value;
              this.province = obj.province.value;
              this.city = obj.city.value;
              this.county = obj.area.value;
            }
            close();
          }
        })
      },
      //确认选择区域
      sureArea(obj){
        console.log(obj.area.code)
      }

    },

  }
</script>
<style>
  /*body{overflow:hidden;}*/
</style>
<style lang="scss" scoped>
  #bill {
    margin: 0 10px;
    margin-bottom: 80px;
  }

  h3 {
    margin: 0px 0px;
  }

  .msg {
    margin-top: 5px;
    padding: 10px 5px;
    background: rgba(255, 238, 233, 1);
    border-radius: 5px;
    /*text-align: center;*/
    color: #FF5D32;
    margin-bottom: 10px;
    font-size: 12px;
    span {
      color: #333;
      /*text-decoration: underline;*/
      /*border-bottom: 1px solid #333;*/
    }

  }

  .dashed-line{border-bottom:1px dashed #DCDCDC;}

  .submit {
    background: rgba(28, 103, 255, 1);
    border-radius: 5px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    color: #fff;
    margin: 20px 10px;
  }
  .btn-group{
    margin: 0 auto;
    text-align: center;
  .reset_btn{background-color: #fff; border: 1px solid #B5B5B5; color:#999; height: 44px; line-height: 44px; margin-right: 15px; padding: 0 40px;}
  .sure_btn{background: rgba(28, 103, 255, 1); color: #fff; padding: 0px 50px; height: 44px; line-height: 44px;}
  .defult_btn{background-color: #E5E5E5;}
  }

  .flex {
    display: flex;
  }

  .space-around {
    justify-content: space-around;
  }
  .align-center{
    align-items: center;
  }

  .space-between {
    justify-content: space-between;
  }
  .blue-line{background-color: #1C67FF; height: 6px; border-radius:4px 4px 0px 0px;}
  .block {
    margin: 10px auto;
    border-radius: 10px;
    background-color: #fff;
    padding: 15px 15px;

  .infos {
    font-size: 14px;
    color: #333;
  }

  }

  .base_btn{display: inline-block; padding: 0px 20px;border-radius: 5px; height: 32px; line-height: 32px;text-align: center;}
  .detail{
    font-size:13px;
    .copy-btn{background-color:#FF9600; border-radius:5px; color: #fff; font-weight: normal; float: right;}
    .gray-btn{border:1px solid rgba(160,160,160,1);border-radius:5px; color: #333333; font-weight: bold; float:right;}
  }
  .detail p{color: #333333;}
  .detail p span:first-child{color: #999999;}
  .detail p{
    .is-wait{color:#FF5D32; font-weight: bold;}
    .is-over{color:#999; font-weight: bold;}
  }

  .bill-item{
  }
  .edit-icon{
    position: absolute;
    right: 0px;
    top: calc(50% - 10px);
    width: 20px;
    height: 20px;
  img{width: 100%;}
  }
  .bill-info{
    margin-top: 15px;
  }
  .bill-input{
    font-size: 14px;
    border-bottom: 1px solid #F5F5F5;
    padding-bottom: 5px;
    span:before{content: '*';color: #FF7F5D;margin-right: 5px; width: 100px;}
    input{height: 35px; font-size: 14px; border: none; outline: none; flex: 1;}
    input::-webkit-input-placeholder{color:#C8CDD3;}
  }
</style>
<style>
  .el-step__icon-inner {
    font-weight: normal;
  }


</style>
